<template>
  <div class="page_container problemOrders_page">
    <el-form :inline="true" :model="searchForm" ref="searchForm" @keyup.enter.native="search" :size="size">
      <el-form-item label="审核类型" prop="type">
        <el-select v-model="searchForm.type" clearable  placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批状态" prop="status">
        <el-select v-model="searchForm.status" clearable  placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
      <el-button @click="resetSearch" icon="el-icon-refresh" :size="size">重置</el-button>
    </el-form>
    <div class="tableBox">
      <el-table :data="dataList" border style="width: 100%;" height="100%">
        <el-table-column prop="auditId" label="审批id"></el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="审批状态" min-width="85"></el-table-column>
        <el-table-column prop="type" header-align="center" align="center" label="审批类型" min-width="80"></el-table-column>
        <el-table-column prop="applyContext" header-align="center" align="center" label="申请描述" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="startTime" header-align="center" align="center" label="订单日期" min-width="80"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center"
                         width="125" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" size="small" style="color: orangered" @click="reject(row)">驳回</el-button>
            <el-button type="text" size="small" @click="approve(row)">审核通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="getDataList" />
  </div>
</template>

<script>
  import api from '../../../utils/api'
  import Pagination from '@/components/Pagination'
  import { mapGetters } from 'vuex'
  export default {
    name: 'problemOrders',
    components: {
      Pagination
    },
    data () {
      return {
        searchForm: {
          type: '',
          status: '',
          pageNum: 1,
          pageSize: 10,
        },
        types: [
          {value: '1', label: '订单退订'},
          {value: '2', label: '开会员'}
        ],
        statusList: [
          {value: '1', label: '待审批'},
          {value: '2', label: '已审批'},
          {value: '3', label: '已驳回'}
        ],
        dataList: [],
        total: 0
      }
    },
    computed: {
      ...mapGetters(['size']),
    },
    created() {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        api.auditList(this.searchForm).then((res) => {
          let {data, total} = res.data
          this.dataList = data
          this.total = Number(total)
        }).catch((res) => {
        })
      },
      // 重置
      resetSearch () {
        this.$refs['searchForm'].resetFields()
      },
      // 查询
      search () {
        this.searchForm.pageNum = 1
        this.getDataList()
      },
      approve(row) {
        let params = {
          auditId: row.auditId
        }
        api.approve(params).then(res => {
          this.$message.success('审核通过成功')
          this.getDataList()
        })
      },
      // 驳回
      reject(row) {
        let params = {
          auditId: row.auditId
        }
        api.reject(params).then(res => {
          this.$message.success('驳回成功')
          this.getDataList()
        })
      }
    }
  }
</script>

<style lang="scss">
  .problemOrders_page.page_container {
    .el-tabs{
      height: 50px;
      .el-tabs__item {
        background-color: #f9f9f9;
        border-bottom: 1px solid #e4e7ed;
      }
      .el-tabs__item.is-active {
        border-bottom: none;
      }
    }
  }
</style>
